<template>
  <div
    class="video"
    style="width:100%;height:100%"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
  >
    <div class="video-track">
      <div v-show="!track">
        <h3 style="color: white;">CLOSED</h3>
      </div>
      <video v-show="track" ref="video" autoplay="true" style="max-width:100%;max-height:100%"></video>
    </div>
    <div class="video-controls" v-if="controls" v-show="showControls">
      <span v-show="track" @click="onFullscreenButtonClicked()" class="video-controls-item">全屏</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    track: { type: Object, default: null },
    controls: { type: Boolean, default: false }
  },
  data() {
    return {
      showControls: false
    };
  },
  created() {},
  methods: {
    onMouseEnter() {
      this.showControls = true;
    },
    onMouseLeave() {
      this.showControls = false;
    },
    onFullscreenButtonClicked() {
      this._fullscreen();
    },

    _fullscreen() {
      this.$refs.video.webkitRequestFullscreen();
    },
    _mountTrack() {
      if (this.track) {
        this.track.attach(this.$refs.video);
      }
    }
  },
  mounted() {
    this._mountTrack();
  },
  watch: {
    track() {
      this._mountTrack();
    }
  },
  computed: {}
};
</script>
<style scoped>
.video {
  width: 100%;
  height: 100%;
}
.video-track {
  display: flex;
  background: black;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.video-controls {
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.5);
  height: 40px;
  position: relative;
  top: -40px;
  padding: 0 20px;
}
.video-controls-item {
  cursor: pointer;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.5);
}
video::-webkit-media-controls {
  display: none !important;
}
</style>
